<!DOCTYPE HTML>
<html>

<head>
    <link href="__STATIC__/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css" />
    <title>后台注册 - H-ui.admin.page v3.0</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>

<body>
    <input type="hidden" id="TenantId" name="TenantId" value="" />
    <div class="header"></div>
    <div class="loginWraper">
        <div id="loginform" class="loginBox">
            <form class="form form-horizontal" action="index.html" method="post">
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                    <div class="formControls col-xs-8">
                        <input id="username" name="" type="text" placeholder="账户" class="input-text size-L"
                            onblur="checkName()">
                        <br>
                        <span id="nameError" style="visibility: hidden;color: red;"></span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                    <div class="formControls col-xs-8">
                        <input id="password" name="" type="password" placeholder="密码" class="input-text size-L"
                            onblur="checkPwd()">
                        <br>
                        <span id="pwdError" style="visibility: hidden;color: red;"></span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                    <div class="formControls col-xs-8">
                        <input id="password1" name="" type="password" placeholder="确认密码" class="input-text size-L"
                            onblur="checkPwd1()">
                        <br>
                        <span id="pwd1Error" style="visibility: hidden;color: red;"></span>
                    </div>
                </div>

                <div class="row cl">
                    <div class="formControls col-xs-8 col-xs-offset-3">
                        <input name="" type="button" class="btn btn-success radius size-L"
                            value="&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;" onclick="register()">
                        <input name="" type="reset" class="btn btn-default radius size-L"
                            value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                    </div>
                    <a href="{:url('index/login')}" style="font-size: 14px;margin-left: 250px;">去登录</a>
                </div>
            </form>
        </div>
    </div>
    <div class="footer">Copyright 你的公司名称 by H-ui.admin.page.v3.0</div>
</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    var instance = axios.create()
    var hasName

    // 检查姓名是否重复(建议抛弃, 自己重写一个)
    // axios是异步的，所以要用async await 感兴趣的可以去了解一下 我不是很懂
    async function checkName () {
        let username = document.getElementById('username').value
        let e = document.getElementById('nameError')

        if (username === '') {
            e.innerText = "请输入用户名！"
            e.style.visibility = "visible"
            return false
        }
        // 已经输入用户名了 查询该用户名是否存在
        await instance.post("{:url('user/checkName')}", {
            username: username
        }).then(respose => {
            if (respose.data.hasName) {
                e.innerText = "用户名已存在！"
                e.style.visibility = "visible"
                hasName = true
            } else {
                e.style.visibility = "hidden"
                hasName = false
            }
        }).catch(error => {
            console.log(error);
        })
    }

    // 检查密码是否为空
    function checkPwd () {
        let pwd = document.getElementById('password').value
        let e = document.getElementById('pwdError')

        if (pwd === '') {
            e.innerText = "请输入密码！"
            e.style.visibility = "visible"
            return false
        }

        e.style.visibility = "hidden"
        return true
    }

    // 检查两次密码是否相同
    function checkPwd1 () {
        let pwd = document.getElementById('password').value
        let pwd1 = document.getElementById('password1').value
        let e = document.getElementById('pwd1Error')

        if (pwd1 === '') {
            e.innerText = "请再次输入密码！"
            e.style.visibility = "visible"
            return false
        }
        if (pwd != pwd1) {
            e.innerText = "两次密码不相同！"
            e.style.visibility = "visible"
            return false
        }

        e.style.visibility = "hidden"
        return true
    }

    // 注册
    function register () {
        // 这样做的原因是 axios的请求是异步的
        // let f = document.getElementById("nameError").style.visibility == "hidden" ? true : false;
        checkName()
        if (!(!hasName & checkPwd() & checkPwd1())) return
        // 注册
        let username = document.getElementById('username').value
        let password = document.getElementById('password').value
        instance.post("{:url('user/register')}", {
            username: username,
            password: password
        }).then(response => {
            if (response.status == 200 && response.data.isPass) {
                alert(response.data.msg)
                location.href = "{:url('index/login')}"
            } else {
                alert(response.data.msg)
            }
        }).catch(error => {
            console.log(error);
        })
    }
</script>